<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .content {
            display: flex;
            flex-wrap: wrap;
        }

        .flex {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-bottom: 10px;
        }

        .blur {
            filter: blur(2px);
        }

        .grayscale {
            filter: grayscale(1);
        }

        .brightness {
            filter: brightness(200%);
        }

        .contrast {
            filter: contrast(4.1);
        }

        .saturate {
            filter: saturate(4);
        }

        .opacity {
            filter: opacity(0.7);
        }

        .sepia {
            filter: sepia(0.8);
        }

        .invert {
            filter: invert(0.9);
        }

        .hue-rotate {
            filter: hue-rotate(180deg);
        }

        .drop-shadow {
            filter: drop-shadow(0px 0px 10px #000);
        }

        .box-shadow {
            box-shadow: 0px 0px 10px #000;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="flex">
            <img src="./css.jpg" alt="">
            <div>正常</div>
        </div>
        <div class="flex">
            <img src="./css.jpg" class="blur" alt="">
            <div>模糊blur</div>
        </div>
        <div class="flex">
            <img src="./css.jpg" class="grayscale" alt="">
            <div>灰度grayscale</div>
        </div>
        <div class="flex">
            <img src="./css.jpg" class="brightness" alt="">
            <div>亮度brightness</div>
        </div>
        <div class="flex">
            <img src="./css.jpg" class="contrast" alt="">
            <div>对比度contrast</div>
        </div>
        <div class="flex">
            <img src="./css.jpg" class="saturate" alt="">
            <div>饱和度saturate</div>
        </div>
        <div class="flex">
            <img src="./css.jpg" class="opacity" alt="">
            <div>透明度opacity</div>
        </div>
        <div class="flex">
            <img src="./css.jpg" class="sepia" alt="">
            <div>褐色sepia</div>
        </div>
        <div class="flex">
            <img src="./css.jpg" class="invert" alt="">
            <div>反色invert</div>
        </div>
        <div class="flex">
            <img src="./css.jpg" class="hue-rotate" alt="">
            <div>色相旋转hue-rotate</div>
        </div>
        <!-- <div class="flex">
            <img src="./css.jpg" class="drop-shadow" alt="">
            <div>阴影drop-shadow</div>
        </div> -->
        <div class="flex">
            <img src="./css2.png" class="drop-shadow" style="width: 300px;" alt="">
            <div>drop-shadow</div>
        </div>
        <div class="flex">
            <img src="./css2.png" class="box-shadow" style="width: 300px;" alt="">
            <div>box-shadow</div>
        </div>
    </div>
    <script type="text/javascript">
        // $(function () {
        //     var $this = $(".mod-pictxt4");
        //     var scrollTimer;
        //     //当鼠标放在$(".mod-pictxt4")元素上的时候，clearInterval(scrollTimer)清除定时器，
        //     $this.hover(function () {
        //             clearInterval(scrollTimer);
        //         },
        //         function () {
        //             //定时器，每隔3秒执行一次scrollNews($this)
        //             scrollTimer = setInterval(function () {  
        //                     scrollNews($this);
        //                 },
        //                 3000);
        //         }).trigger("mouseout");
        // });

        // function scrollNews(obj) {
        //     var $self = obj.find("ul:first");  //.mod-pictxt4底下的ul标签的第一个元素
        //     var lineHeight = $self.find("li:first").height();
        //     //动画效果animate
        //     $self.animate({
        //             "margin-top": -lineHeight + "px"
        //         },
        //         300,
        //         function () {
        //             $self.css({
        //                 "margin-top": "0px"
        //             }).find("li:first").appendTo($self);
        //         })
        // }
    </script>
</body>

</html>